<template>
  <ContentWrap>
    <el-form :model="queryParams" label-width="80px" :inline="true">
      <el-form-item label="设备ID">
        <!-- 选择设备ID -->
        <el-select
          v-model="queryParams.deviceId"
          filterable
          class="!w-240px"
          placeholder="请选择设备"
        >
          <el-option
            v-for="item in deviceList"
            :key="item.id"
            :label="item.deviceName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- 请选择套餐 -->
      <el-form-item label="套餐">
        <el-select v-model="queryParams.packageId" class="!w-240px" placeholder="请选择套餐">
          <el-option
            v-for="item in packageList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- 下发指令 -->
      <el-form-item>
        <el-button type="primary" @click="handleSendCommand" :loading="loading">下发指令</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { SofaBasicApi } from '@/api/application/sofa'
const queryParams = ref({
  deviceId: undefined as number | undefined,
  packageId: undefined as number | undefined
})
const deviceList = ref<any>([])
const packageList = ref<any>([])
const loading = ref(false)
const handleSendCommand = async () => {
  loading.value = true
  try {
    await SofaBasicApi.executeByPackage(queryParams.value)
    ElMessage.success('下发指令成功')
  } catch (error) {
    ElMessage.error('下发指令失败')
  }
  loading.value = false
}
const getDeviceList = async () => {
  const res = await SofaBasicApi.getSofaDeviceList()
  deviceList.value = res.list
}
const getPackageList = async () => {
  const res = await SofaBasicApi.getPackageList({
    pageNo: 1,
    pageSize: 100
  })
  packageList.value = res
}
onMounted(() => {
  getDeviceList()
  getPackageList()
})
</script>
